<template>
    <div class="main-container">
        <el-card class="box-card !border-none" shadow="never">

            <div class="flex justify-between items-center">
                <span class="text-page-title">{{pageName}}</span>
            </div>

            <el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never">
                <el-form :inline="true" :model="diyRouteTableData.searchParam" ref="searchFormDiyRouteRef">
                    <el-form-item :label="t('title')" prop="title">
                        <el-input v-model.trim="diyRouteTableData.searchParam.title" :placeholder="t('titlePlaceholder')" />
                    </el-form-item>
                    <el-form-item :label="t('forAddon')" prop="addon_name">
                        <el-select v-model="diyRouteTableData.searchParam.addon_name" :placeholder="t('forAddonPlaceholder')">
                            <el-option :label="t('all')" value="" />
                            <el-option v-for="(item, key) in apps" :label="item.title" :value="key" :key="key"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="loadDiyRouteList()">{{ t('search') }}</el-button>
                        <el-button @click="resetForm(searchFormDiyRouteRef)">{{ t('reset') }}</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

            <el-table :data="diyRouteTableData.data" size="large" v-loading="diyRouteTableData.loading">
                <template #empty>
                    <span>{{ !diyRouteTableData.loading ? t('emptyData') : '' }}</span>
                </template>

                <el-table-column prop="title" :label="t('title')" min-width="70" />
                <el-table-column prop="addon_title" :label="t('forAddon')" min-width="70">
                    <template #default="{ row }">
                        <span>{{ row.addon_info.title }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="page" :label="t('wapUrl')" min-width="230">
                    <template #default="{ row }">
                        <span class="mr-[10px]">{{ wapDomain + row.page }}</span>
                        <el-button type="primary" link @click="copyEvent(wapDomain + row.page)">{{ t('copy') }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="page" :label="t('weappUrl')" min-width="120">
                    <template #default="{ row }">
                        <span class="mr-[10px]">{{ row.page }}</span>
                        <el-button type="primary" link @click="copyEvent(row.page)">{{ t('copy') }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column :label="t('share')" fixed="right"  align="right" min-width="40">
                    <template #default="{ row }">
                        <el-button v-if="row.is_share == 1" type="primary" link @click="openShare(row)">{{ t('shareSet') }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="mt-[16px] flex justify-end">
                <el-pagination v-model:current-page="diyRouteTableData.page" v-model:page-size="diyRouteTableData.limit" layout="total, sizes, prev, pager, next, jumper" :total="diyRouteTableData.total" @size-change="getDiyRouteListFn" @current-change="loadDiyRouteList" />
            </div>
        </el-card>

        <!-- 分享设置-->
        <el-dialog v-model="shareDialogVisible" :title="t('shareSet')" width="30%">

            <el-tabs v-model="tabShareType">
                <el-tab-pane :label="t('wechat')" name="wechat"></el-tab-pane>
                <el-tab-pane :label="t('weapp')" name="weapp"></el-tab-pane>
            </el-tabs>
            <el-form :model="shareFormData[tabShareType]" label-width="90px" ref="shareFormRef" :rules="shareFormRules">
                <el-form-item :label="t('sharePage')">
                    <span>{{ sharePage }}</span>
                </el-form-item>
                <el-form-item :label="t('shareTitle')" prop="title">
                    <el-input v-model.trim="shareFormData[tabShareType].title" :placeholder="t('shareTitlePlaceholder')" clearable maxlength="30" show-word-limit />
                </el-form-item>
                <el-form-item :label="t('shareDesc')" prop="desc" v-if="tabShareType == 'wechat'">
                    <el-input v-model.trim="shareFormData[tabShareType].desc" :placeholder="t('shareDescPlaceholder')" type="textarea" rows="4" clearable maxlength="100" show-word-limit />
                </el-form-item>
                <el-form-item :label="t('shareImageUrl')" prop="url">
                    <upload-image v-model="shareFormData[tabShareType].url" :limit="1" />
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="shareDialogVisible = false">{{ t('cancel') }}</el-button>
                    <el-button type="primary" @click="shareEvent(shareFormRef)">{{ t('confirm') }}</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, computed } from 'vue'
import { t } from '@/lang'
import { getDiyRouteAppList,getDiyTemplate, getDiyRouteList, getDiyRouteInfo, editDiyRouteShare } from '@/app/api/diy'
import { ElMessage, FormInstance } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { useClipboard } from '@vueuse/core'
import { getUrl } from '@/app/api/sys'
import { cloneDeep } from 'lodash-es'

const route = useRoute()
const router = useRouter()
const pageName = route.meta.title

const pageTemplate: any = reactive({})

const formRef = ref<FormInstance>()
const dialogVisible = ref(false)

const diyRouteTableData = reactive({
    page: 1,
    limit: 10,
    total: 0,
    loading: true,
    data: [],
    searchParam: {
        title: '',
        addon_name:''
    }
})

const diyRouteList: any = ref([])

const wapDomain = ref('')
const getDomain = async () => {
    wapDomain.value = (await getUrl()).data.wap_url
}

getDomain()

const apps: any = reactive({}) // 应用插件列表

getDiyRouteAppList().then(res=> {
    if (res.data) {
        for (const key in res.data) {
            apps[key] = res.data[key];
        }
    }
});

const getDiyRouteListFn = () => {
    getDiyRouteList({}).then(res => {
        diyRouteTableData.loading = false
        diyRouteList.value = cloneDeep(res.data)
        loadDiyRouteList(diyRouteTableData.page)
    }).catch(() => {
        diyRouteTableData.loading = false
    });
}

getDiyRouteListFn();

/**
 * 获取自定义路由列表
 */
const loadDiyRouteList = (page: number = 1) => {
    diyRouteTableData.page = page

    const tempData = cloneDeep(diyRouteList.value)
    const data: any = [];

    // 筛选条件
    for (let i = 0; i < tempData.length; i++) {
        let isAdd = true;
        if (diyRouteTableData.searchParam.title && tempData[i].title.indexOf(diyRouteTableData.searchParam.title) == -1) {
            isAdd = false;
        }

        if (diyRouteTableData.searchParam.addon_name && tempData[i].addon_info && tempData[i].addon_info.key != diyRouteTableData.searchParam.addon_name) {
            isAdd = false;
        }

        if (isAdd) {
            data.push(tempData[i]);
        }
    }

    diyRouteTableData.total = data.length
    const len = Math.ceil(data.length / diyRouteTableData.limit)
    const dataGather = []

    for (let i = 0; i < len; i++) {
        dataGather[i] = data.splice(0, diyRouteTableData.limit)
    }
    diyRouteTableData.data = dataGather[diyRouteTableData.page - 1]
}

// 获取自定义页面模板
getDiyTemplate({}).then(res => {
    for (const key in res.data) {
        pageTemplate[key] = res.data[key]
    }
})

const searchFormDiyRouteRef = ref<FormInstance>()

/**
 * 复制
 */
const { copy, isSupported, copied } = useClipboard()
const copyEvent = (text: string) => {
    if (!isSupported.value) {
        ElMessage({
            message: t('notSupportCopy'),
            type: 'warning'
        })
    }
    copy(text)
}

watch(copied, () => {
    if (copied.value) {
        ElMessage({
            message: t('copySuccess'),
            type: 'success'
        })
    }
})

const tabShareType = ref('wechat')
const sharePage = ref('')
const shareFormId = ref(0)
const diyRouteData = reactive({
    title: '',
    name: '',
    page: '',
    is_share: 0,
    sort: 0
})
const shareFormData = reactive({
    wechat: {
        title: '',
        desc: '',
        url: ''
    },
    weapp: {
        title: '',
        url: ''
    }
})
const shareDialogVisible = ref(false)
const shareFormRules = computed(() => {
    return {}
})

const shareFormRef = ref<FormInstance>()
const openShare = async (row: any) => {
    // 基础页面
    const info = (await getDiyRouteInfo({
        name: row.name
    })).data

    if (info.title) {
        row.id = info.id
        row.title = info.title
        row.name = info.name
        row.page = info.page
        row.is_share = info.is_share
        row.sort = info.sort
        row.share = info.share
    }

    diyRouteData.title = row.title
    diyRouteData.name = row.name
    diyRouteData.page = row.page
    diyRouteData.is_share = row.is_share
    diyRouteData.sort = row.sort

    shareFormId.value = row.id
    sharePage.value = row.title
    const share = row.share ? JSON.parse(row.share) : {
        wechat: { title: '', desc: '', url: '' },
        weapp: { title: '', url: '' }
    }
    if (share) {
        shareFormData.wechat = share.wechat
        shareFormData.weapp = share.weapp
    }

    shareDialogVisible.value = true
}

const shareEvent = async (formEl: FormInstance | undefined) => {
    if (!formEl) return

    await formEl.validate(async (valid) => {
        if (valid) {
            const save = editDiyRouteShare
            save({
                id: shareFormId.value,
                share: JSON.stringify(shareFormData),
                ...diyRouteData
            }).then(() => {
                getDiyRouteListFn()
                shareDialogVisible.value = false
            }).catch(() => {
            })
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    getDiyRouteListFn()
}
</script>

<style lang="scss" scoped></style>
